<template>
  <el-carousel :interval="4000" type="card" height="500px">
    <el-carousel-item v-for="item in images" :key="item">
      <div class="demo-carousel">
        <img :src="item" alt="" />
      </div>
    </el-carousel-item>
  </el-carousel>
  <el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    :size="'default'"
    :total="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";
const images = ref([
  new URL("@/assets/1.jpg", import.meta.url).href,
  new URL("@/assets/5.jpg", import.meta.url).href,
  new URL("@/assets/101.jpg", import.meta.url).href,
]);
const pageSize = ref(100);
const currentPage = ref(1);
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
<style scoped>
.demo-carousel {
  text-align: center;
  background: #ddd;
  overflow: hidden;
}
.demo-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
</style>
